<template>
	<div class="main">
		<u-row class="v-head" v-for="item in likesInfo" :key="item.user_id?item.user_id:'1'">
			<u-col span="2">
				<u-avatar :src="item.avatar?item.avatar:''" mode="circle"></u-avatar>
			</u-col>
			<u-col span="6">
				<u-row>
					<u-col class="nickname">{{item.nickname?item.nickname:''}}</u-col>
				</u-row>
				<u-row>
					<u-col class="infos">{{item.age?item.age:0}}岁 {{item.address?item.address:''}} {{item.occupation?item.occupation:''}}</u-col>
				</u-row>
			</u-col>
			<u-col span="4">
				<button class="btn1" v-if="!item.isFollow" @click="cancelFollow(item)">已关注</button>
				<!-- <button class="btn1" v-else @click="follow(item)">关注</button> -->
			</u-col>
		</u-row>
	</div>
	
</template>

<script setup>
	import {
		reactive,ref,onMounted
	} from 'vue';
	import { getUserInfoById,getFocusList,calcelFocus } from '../../api/user.js'
	let likesInfo = ref([
		{}
	])
	//点击取消关注
	const cancelFollow = async (obj) =>{
		const result = await calcelFocus({
			user_id:uni.getStorageSync('userInfo').user_id,
			friend_id:obj.user_id
		})
		if(result.code == 1){
			uni.showToast({
				icon:'none',
				text:'取消关注成功'
			})
			obj.isFollow = false
			likesInfo.value = []
			const list = await getFocusList({
				user_id:uni.getStorageSync('userInfo').user_id
			})
			list.data.forEach(async(item) => {
				const result = await getUserInfoById({
					user_id:item.friend_id
				})
				likesInfo.value.push(result.data)
			})	
		}
		
	}
	//点击关注
	const follow = (obj) =>{
		obj.isFollow = true
	}
	//获取关注的人的详细信息
	const getFollows = async () => {
		likesInfo = []
		const list = await getFocusList({
			user_id:uni.getStorageSync('userInfo').user_id
		})
		list.data.forEach(async(item) => {
			const result = await getUserInfoById({
				user_id:item.friend_id
			})
			likesInfo.value.push(result.data)
		})
		
	}
	onMounted(async () => {
		likesInfo.value = []
		const list = await getFocusList({
			user_id:uni.getStorageSync('userInfo').user_id
		})
		list.data.forEach(async(item) => {
			const result = await getUserInfoById({
				user_id:item.friend_id
			})
			likesInfo.value.push(result.data)
		})		
	})
</script>

<style lang="scss" scoped>
	.main{
		display: flex;
		flex-direction: column;
		.v-head {
			height: 100rpx;
			line-height: 50rpx;
			margin: 20rpx 0;
			.btn1 {
				width: 120rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				border-radius: 60rpx;
				color: hotpink;
				background-color: #efd2d4;
			}
		
			.nickname {
				font-size: 36rpx;
			}
		
			.infos {
				font-size: 24rpx;
				color: darkgray;
			}
		}
	}
	
</style>